<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">博客管理</el-menu-item>
      <el-menu-item index="3">题库管理</el-menu-item>
    </el-menu>
    <div
      style="
        width: 100%;
        height: 800px;
        background-color: #fff;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
      "
    >
      <div style="padding: 15px"><h2>新增题目</h2></div>
      <div>
        <div style="margin-left: 110px; margin-top: 38px">
          <span>标题:</span>
          <input
            type="text"
            style="
              width: 200px;
              height: 26px;
              border-radius: 5px;
              border: 1px solid rgb(50, 143, 205);
              outline: none;
            "
            v-model="topic"
          />
        </div>
        <div style="margin-left: 110px; margin-top: 30px">
          <span>难度:</span>
          <input
            type="text"
            style="
              width: 200px;
              height: 26px;
              border-radius: 5px;
              border: 1px solid rgb(50, 143, 205);
              outline: none;
            "
            v-model="difficulty"
          />
        </div>
        <div style="margin-left: 110px; margin-top: 30px">
          <span>分类:</span>
          <input
            type="text"
            style="
              width: 200px;
              height: 26px;
              border-radius: 5px;
              border: 1px solid rgb(50, 143, 205);
              outline: none;
            "
            v-model="label"
          />
        </div>
        <div style="margin-left: 110px; margin-top: 30px">
          <span>md文件地址:</span>
          <input
            type="text"
            style="
              width: 200px;
              height: 26px;
              border-radius: 5px;
              border: 1px solid rgb(50, 143, 205);
              outline: none;
            "
            v-model="description"
          />
        </div>
        <div style="margin-left: 110px; margin-top: 30px">
          <span>预期输出:</span>
          <input
            type="text"
            style="
              width: 200px;
              height: 26px;
              border-radius: 5px;
              border: 1px solid rgb(50, 143, 205);
              outline: none;
            "
            v-model="expected_output"
          />
        </div>
      </div>
      <div>
        <button
          style="
            margin-top: 80px;
            margin-left: 450px;
            width: 56px;
            height: 30px;
            background-color: rgb(50, 143, 205);
            border: 0px;
            border-radius: 5px;
          "
          v-on:click="tianjia()"
        >
          添加
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: "3",
      topic: "",
      difficulty: "",
      label: "",
      description: "",
      expected_output: "",
    };
  },
  methods: {
    handleSelect(key) {
      if (key == 3) {
        this.$message({
          message: "请不用重复点击同一个路由！！",
          type: "warning",
        });
      } else if (key == 2) {
        this.$router.push("/blog");
      } else if (key == 1) {
        this.$router.push("/index");
      }
    },
    tianjia() {
      axios
        .post("http://localhost:8888/tianjia", {
          topic: this.topic,
          difficulty: this.difficulty,
          label: this.label,
          description: this.description,
          expected_output: this.expected_output,
        })
        .then((Response) => {
          this.$message({
          message: '添加成功',
          type: 'success'
        });
        });
    },
  },
};
</script>

<style>
</style>